<template>
	<view class="driving-page">
		<!-- 粒子背景 -->
		<view class="particles">
			<view v-for="(particle, i) in particles" :key="i" class="particle" :style="{
              left: `${particle.x}%`,
              top: `${particle.y}%`,
              width: `${particle.size}px`,
              height: `${particle.size}px`,
              background: particle.color,
              opacity: particle.opacity,
              animationDelay: `${particle.delay}s`
            }"></view>
		</view>

		<!-- 导航卡片 -->
	<!-- 	<view class="card-nav">
			<view class="nav-card" v-for="(tab, i) in tabs" :key="i" :class="{ active: activeTab === tab.id }"
				@click="activeTab = tab.id,tabClick(i)" :style="{
              transform: activeTab === tab.id ? 'translateY(-10px)' : '',
              zIndex: activeTab === tab.id ? 2 : 1
            }">
				<image :src="tab.icon" mode="aspectFit"></image>
				<text>{{ tab.title }}</text>
			</view>
		</view> -->

		<!-- 驾校列表页 -->
		<view v-if="activeTab === 'list'" class="school-list" style="margin-top: 35rpx;">
	<!-- 		<view class="search-box">
				<uni-search-bar v-model="page.keyword" placeholder="搜索驾校" @confirm="searchSchool" />
			</view> -->

			<!-- <view class="filter-bar">
				<picker @change="sortBy" :range="sortOptions" mode="selector" range-key="label">
					<view class="filter-item">
						<text>{{ sortOptions[sortIndex].label }}</text>
						<uni-icons type="arrowdown" size="16" />
					</view>
				</picker>
				<picker @change="filterByPrice" mode="selector" :range="priceFilters" range-key="label">
					<view class="filter-item">
						<text>{{ priceFilters[priceFilterIndex].label }}</text>
						<uni-icons type="arrowdown" size="16" />
					</view>
				</picker>
			</view> -->

			<view class="school-container">
				<view v-for="(school, i) in filteredSchools" :key="i" class="school-card">
					<view class="school-header">
						<view class="school-badge" :style="{ background: 'linear-gradient(135deg, #ff80ab 0%, #ff4081 100%)' }">
							{{ school.school_name }}
						</view>
						<view class="school-title">
							<text class="name">{{ school.school_name }}</text>
							<view class="distance">
								<uni-icons type="location" size="14" color="#666" />
								<!-- <text>{{ school.distance }}km</text> -->
								<text>{{school.address}}</text>
							</view>
						</view>
					</view>

					<view class="school-body">
						<view class="metrics">
							<view class="metric-item">
								<text class="value">¥{{ school.price }}</text>
								<text class="label">价格</text>
							</view>
							<view class="metric-item">
								<text class="value">{{ school.passRate }}%</text>
								<text class="label">通过率</text>
							</view>
							<view class="metric-item">
								<text class="value">{{ school.students }}</text>
								<text class="label">在学人数</text>
							</view>
						</view>
						<view class="rating">
							<uni-rate :value="school.rating?5:5" readonly size="18" />
							<!-- <text>({{ school.reviews }}条评价)</text> -->
						</view>
					</view>

					<view class="school-footer">
						<button class="detail-btn" @click="viewSchoolDetail(school.school_id)">查看详情</button>
						<button class="book-btn" @click="bookSchool(school)">立即报名</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 预约练车页 -->
		<view v-if="activeTab === 'appointment'" class="appointment-page" style="padding: 25rpx;margin-top: 155rpx;">
			<!-- 预约练车页 -->
			<reservation-vue @success="save" v-if="success == false"></reservation-vue>
			<!-- 预约成功页 -->
			<reservation-success-vue v-else></reservation-success-vue>
		</view>

		<!-- 支付页 -->
		<view v-if="activeTab === 'payment'" class="payment-page" style="margin-top: 180rpx;">
			<rent-car-vue @canSubmit="submit" v-if="canSubmit == false"></rent-car-vue>
			<!-- 支付确认页 -->
			<rent-payment-vue v-else></rent-payment-vue>
		</view>
	</view>
</template>


<script>
	import reservationVue from '../../../components/reservation.vue'
	import reservationSuccessVue from '../../../components/reservationSuccess.vue'
	import rentPaymentVue from '../../../components/rentPayment.vue'
	import rentCarVue from '../../../components/rentCar.vue'
	export default {
		components: {
			reservationVue,
			reservationSuccessVue,
			rentPaymentVue,
			rentCarVue
		},
		data() {
			return {
				activeTab: 'list',
				success: false,
				canSubmit: false,
				tabs: [{
						id: 'list',
						title: '驾校列表',
						icon: '/static/icons/list.png'
					},
					{
						id: 'appointment',
						title: '预约练车',
						icon: '/static/icons/calendar.png'
					},
					{
						id: 'payment',
						title: '驾考租车',
						icon: '/static/icons/payment.png'
					}
				],
				particles: [],
				sortOptions: [{
						label: '智能排序',
						value: 'default'
					},
					{
						label: '距离最近',
						value: 'distance'
					},
					{
						label: '价格最低',
						value: 'price'
					},
					{
						label: '通过率最高',
						value: 'passRate'
					}
				],
				sortIndex: 0,
				priceFilters: [{
						label: '价格区间',
						value: 'all'
					},
					{
						label: '2000以下',
						value: '0-2000'
					},
					{
						label: '2000-3000',
						value: '2000-3000'
					},
					{
						label: '3000以上',
						value: '3000-10000'
					}
				],
				priceFilterIndex: 0,
				schools: [{
						id: 1,
						name: "校园驾校总校",
						shortName: "校驾",
						distance: 1.2,
						price: 2980,
						passRate: 92,
						rating: 4.5,
						reviews: 128,
						students: 256,
						gradient: 'linear-gradient(135deg, #ff80ab 0%, #ff4081 100%)',
					}
					// 可追加更多驾校数据
				],
				filteredSchools: [],
				page:{
					pages:1,
					limit:20,
					keyword:''
				}
			}
		},
		created() {
			this.generateParticles()
			this.filteredSchools = [...this.schools]
		},
		onLoad() {
			this.getList()
		},
		methods: {
			tabClick(i){
				if(i == 0) this.getList()
			},
			async getList(){
				const res = await this.$api.get('/DrivingSchool/list',this.page,true)
				console.log(res)
				if(res.data.code === 200) {
					this.filteredSchools = res.data.data.list
				}
			},
			submit(data) {
				this.canSubmit = data
			},
			save(data) {
				this.success = data
			},
			generateParticles() {
				const particles = []
				for (let i = 0; i < 30; i++) {
					particles.push({
						x: Math.random() * 100,
						y: Math.random() * 100,
						size: Math.random() * 6 + 2,
						color: `hsl(${Math.random() * 60 + 200}, 70%, 60%)`,
						opacity: Math.random() * 0.4 + 0.1,
						delay: Math.random() * 3
					})
				}
				this.particles = particles
			},
			sortBy(e) {
				console.log('aasdad',)
				this.sortIndex = e.detail.value
				const sortValue = this.sortOptions[this.sortIndex].value

				this.filteredSchools.sort((a, b) => {
					if (sortValue === 'distance') return a.distance - b.distance
					if (sortValue === 'price') return a.price - b.price
					if (sortValue === 'passRate') return b.passRate - a.passRate
					return 0
				})
			},
			filterByPrice(e) {
				this.priceFilterIndex = e.detail.value
				const value = this.priceFilters[this.priceFilterIndex].value

				if (value === 'all') {
					this.filteredSchools = [...this.schools]
				} else {
					const [min, max] = value.split('-').map(Number)
					this.filteredSchools = this.schools.filter(s => s.price >= min && s.price <= max)
				}
			},
			searchSchool(e) {
				const keyword = e.value.toLowerCase()
				
			},
			viewSchoolDetail(id) {
				uni.navigateTo({
					url: `/pages/service/driving/detail/detail?id=${id}`
				})
			},
			bookSchool(item) {
				uni.navigateTo({
					url: `/pagesA/confirm?id=${item.school_id}&name=${item.school_name}`
				})
			}
		}
	}
</script>



<style lang="scss">
	.driving-page {
		position: relative;
		// height: 100vh;
		min-height: 100vh;
		padding-bottom: 50px;
		overflow: hidden;
		background: linear-gradient(to bottom, #f0f4f8, #d9e2ec);

		.particles {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 0;

			.particle {
				position: absolute;
				border-radius: 50%;
				animation: float 15s infinite linear;
			}
		}

		.card-nav {
			display: flex;
			justify-content: space-around;
			padding: 20px 0;
			position: relative;
			z-index: 100;
			position: fixed;
			width: 100%;
			.nav-card {
				width: 30%;
				padding: 15px 0;
				background: white;
				border-radius: 12px;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;

				image {
					width: 30px;
					height: 30px;
					margin-bottom: 6px;
				}

				text {
					font-size: 14px;
					color: #555;
				}

				&.active {
					// background: linear-gradient(135deg, #FF5C8D 0%, #764ba2 100%);
					// background: linear-gradient(to bottom right, #e3f2fd, #fce4ec);
					background: linear-gradient(to right, #ff80ab, #ff4081);

					text {
						color: white;
						font-weight: bold;
					}
				}
			}
		}

		.school-list {
			padding: 0 15px;
			z-index: 1;

			.search-box {
				margin-bottom: 15px;
			}

			.filter-bar {
				display: flex;
				justify-content: space-between;
				margin-bottom: 15px;

				.filter-item {
					background: white;
					padding: 8px 15px;
					border-radius: 20px;
					display: flex;
					align-items: center;
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

					text {
						margin-right: 5px;
						font-size: 14px;
					}
				}
			}

			.school-container {
				// max-height: calc(100vh - 250px);
				overflow-y: auto;
				padding-bottom: 20px;
			}

			.school-card {
				background: white;
				border-radius: 12px;
				margin-bottom: 15px;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
				overflow: hidden;

				.school-header {
					display: flex;
					align-items: center;
					padding: 15px;
					background: #f8fafc;

					.school-badge {
						width: 50px;
						height: 50px;
						border-radius: 50%;
						color: white;
						font-weight: bold;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 15px;
					}

					.school-title {
						.name {
							font-size: 16px;
							font-weight: bold;
						}

						.distance {
							display: flex;
							align-items: center;
							font-size: 13px;
							color: #666;

							uni-icons {
								margin-right: 4px;
							}
						}
					}
				}

				.school-body {
					padding: 10px 15px;

					.metrics {
						display: flex;
						justify-content: space-between;

						.metric-item {
							text-align: center;

							.value {
								font-weight: bold;
								font-size: 16px;
							}

							.label {
								font-size: 12px;
								color: #888;
							}
						}
					}

					.rating {
						display: flex;
						align-items: center;
						margin-top: 8px;

						text {
							font-size: 13px;
							margin-left: 6px;
							color: #888;
						}
					}
				}

				.school-footer {
					display: flex;
					justify-content: space-between;
					padding: 10px 15px 15px;

					.detail-btn,
					.book-btn {
						flex: 1;
						margin: 0 5px;
						border-radius: 8px;
						font-size: 14px;
					}

					.book-btn {
						// background-color: #ff5c8d;
						background: linear-gradient(to right, #ff80ab, #ff4081);
						color: white;
					}
				}
			}
		}
	}

	@keyframes float {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-100vh);
		}
	}
</style>